<template>
  <dk-table
    ref="DkTableRef"
    :table-api="tableApi"
    :query="{ plaid: getPlaid() }"
    :hide-buttons="['recycle', 'add', 'delete']"
    :cache-table="!getDev()"
    :header-cell-style="headerCellStyle"
  >
    <template #DeleteButtonAppend>
      <el-button type="primary" class="ml" icon="Plus" @click="dialogVisible = true">添加模块</el-button>
    </template>
    <template #addon_solt="{ row }">
      <div v-if="row.addons" class="text-center">
        <el-image :src="row.addons.icon || '@/assets/default/addon.png'" alt="" style="width: 80px; height: 80px; border-radius: 10px">
          <template #error>
            <img src="@/assets/default/addon.png" alt="" style="width: 80px" />
          </template>
        </el-image>
        <div class="color-#666">{{ row.addons.title }}</div>
      </div>
    </template>
  </dk-table>
  <dk-form ref="settingRef" :form-data="formData" top="5vh" :is-dialog="true" />
  <el-dialog v-model="dialogVisible" title="添加新应用" width="810px">
    <AddPlatformAddonList @success="getList()" />
  </el-dialog>
</template>
<script setup>
import { onMounted, ref } from 'vue'

// 自动判断开发模式启用缓存
// @ts-ignore
import { getDev } from '@/utils/auth'
// @ts-ignore
import { getPlaid } from '@/composables/useSystem'
import { getPlatformAddonForm } from '@/api/platform_addon.js'
import AddPlatformAddonList from '@/views/platform/components/common/AddPlatformAddonList/index.vue'
const DkTableRef = ref()
const settingRef = ref()
const formData = ref(null)
const dialogVisible = ref(false)

const props = defineProps({
  tableApi: {
    default: '',
    type: String
  },
  query: {
    default: () => {
      return { plaid: getPlaid() }
    },
    type: Object
  }
})

const headerCellStyle = (data) => {
  if (data.columnIndex === 2) {
    return {
      textAlign: 'center'
    }
  } else {
    return {}
  }
}

const getList = () => {
  dialogVisible.value = false
  DkTableRef.value.DkTable.getIndex()
}

onMounted(() => {
  DkTableRef.value.DkTable.table.filter.limit = 5
  DkTableRef.value.DkTable.onClickButton((event, data) => {
    // 判断按钮事件名称
    if (event === 'setting') {
      getPlatformAddonForm(data.row.id, data.row.plaid).then((res) => {
        formData.value = res.data
        settingRef.value.show()
      })
    } else if (event === 'jump') {
      window.open(data.row.addon.default_url)
    }
  })
})
</script>
<style lang="scss" scoped></style>
